/* Fonts from google fonts */
@font-face { font-family: "Google Sans Flex"; src: url(fonts/googlesansflex.ttf); }

body{
    background:#FFEADE;
    color:#000;
    font-family: "Google Sans Flex";
    padding:50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1,h2,h3,p,a{margin:0;padding:0;}
h1{font-size: 32px;}
p{font-size: 18px;}
span.bad{color:#f00;}
.page{ margin-top:15px; width: 100%;}

header{
    height: 225px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background:#FFA872;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 30px;
}

header.simple{ height: max-content; background: none; border-radius: 0; }
header h1{ font-size: 52px; font-weight: 600;}

header#index {
    background: 
        linear-gradient(to bottom, transparent, #000000aa),
        image-set(url("images/banner.webp"));
    background-position: center;
    background-size: cover;
    color:#fff;
}

main{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2px;
}

.i{
    background: #FFA872;
    margin:10px;
    padding:25px;
    border-radius: 30px;
    width: 100%;
}

.i-img{
    width: 100%; 
    border: #FFA872 10px solid; 
    border-radius: 30px; 
    padding: 0;
    margin:10px;
}

.i-icon{ 
    padding: 25px;
    background: #FFA872;
    border-radius: 30px;
    margin:10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.i.big{ width: 70%; }
.i.small { width: 30%; }
.i-img.small {width: calc(30% + 25px);}

.i#special-soon { 
    background: none; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.i#special-soon p{ color: #AEA8A5; font-size: 32px; font-weight: 600; }

.nav{ 
    margin:15px; 
    padding:10px;
    background:#FFA872;
    height: max-content;
    width: max-content;
    border-radius: 50px;
    position: fixed;
    bottom: 15px;
}

.nav#big-page{ position: sticky; }

.nav-list{
    display: flex; 
    flex-direction: row; 
    list-style: none;
    margin: 0;
    padding:0;
}

.nav-link{
    margin: 0;
    padding:0;
    text-align: left;
    background: #FFCC9F;
    margin:5px;
    padding:30px;
    display: flex;
    padding-top:15px;
    padding-bottom:15px;
    border-radius: 20px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 20px;
    color:#041637;
    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 24;
    font-size: 24px;
}

.material-symbols-rounded{ font-size: 30px; }
.nav-link.top {border-radius: 30px 10px 10px 30px;}
.nav-link.mid {border-radius: 10px;}
.nav-link.last{border-radius: 10px 30px 30px 10px;}
.nav-link.selected{animation: selected 0.5s cubic-bezier(0,0,0,1) 0s forwards;}
.nav-link#deselected{animation: deselected 0.5s cubic-bezier(0,0,0,1) 0s forwards;}
.nav-link.top#deselected{animation: deselected-top 0.5s cubic-bezier(0,0,0,1) 0s forwards;}
.nav-link.last#deselected{animation: deselected-last 0.5s cubic-bezier(0,0,0,1) 0s forwards;}
.link{ text-decoration: underline 2px; color: #db5000; font-weight: 500; }

.group, .card-view{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

.card-view{
    flex-wrap: wrap; 
    justify-content: center; 
    margin-top:10px;
}

.card{
    width: 250px;
    height: 350px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
    align-items: center;
    background: #FFA872;
    margin:15px;
    border-radius: 30px;
    text-decoration: none;
    color:#000;
    transition: 0.25s cubic-bezier(0,0,0,1);
}

.card h1{ margin:15px; margin-bottom: 0; }
.card p{ margin:15px; margin-top: 0; font-weight: 400;}
.card:hover{ transform: scale(1.025);}
.card:active { opacity: 85%; transform: scale(0.975); }

.card .icon-area{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 30px 30px 0 0;
}

.card#t4p212 {background: #72a3ff;}

.card#t4p212 .icon-area {
    background: 
        linear-gradient(to bottom, #72a3ff45 60%, #72a3ff 100%),
        image-set(url(images/t4p212_preview.png));
    background-size: cover;
    background-position: center;
}

.card#thesillyteam .icon-area {
    background: 
        linear-gradient(to bottom, #00000045 60%, #000000 100%),
        image-set(url(images/thesillyteam_preview.png));
    background-size: cover;
    background-position: center;
}

.card .icon-area img {width: 140px;height: 140px;object-fit: contain;}
.card .icon-area p {opacity: 50%;font-size: 24px;}
.card#thesillyteam {background:#000;color:#fff;}
.card#thesillyteam .icon-area p {color: #fff;}
.card-view#devices .card h1 {margin:0;padding:0;margin-bottom:25px;}
.no-ls{list-style: none; padding-left: 0;}
.gone{ display: none; }
.show{ display: initial; }

@keyframes selected {
    0%{ background:#FFCC9F; color:#000; }
    100%{
        background:#FF6200;
        color:#fff;
        border-radius: 30px;
        font-weight: 700;
    }
}

@keyframes deselected {
    0%{
        background:#FF6200;
        color:#fff;
        border-radius: 30px;
    }
    100%{
        background:#FFCC9F;
        color:#000;
        border-radius: 10px;
        font-weight: 500;
    }
}

@keyframes deselected-top {
    0%{
        background:#FF6200;
        color:#fff;
        border-radius: 30px;
    }
    100%{
        background:#FFCC9F;
        color:#000;
        border-radius: 20px 20px 10px 10px;
    }
}

@keyframes deselected-last {
    0%{
        background:#FF6200;
        color:#fff;
        border-radius: 30px;
    }
    100%{
        background:#FFCC9F;
        color:#000;
        border-radius: 10px 10px 20px 20px;
    }
}

@media screen and (width < 640px) {
    body{ 
        flex-direction: column; 
        padding: 2.5px;
        align-items: center;
    }

    h1{font-size: 20px;}
    p{font-size: 14px;}
    .group{ flex-direction: column; }
    header{ margin:4px; height: 200px; }
    header h1 { font-size: 32px; }
    header p { font-size: 20px; }

    .nav{
        margin:2.5px;
        width: max-content;
        border-radius: 50px;
        z-index: 10;
        bottom: 25px;
    }

    .nav-link{ 
        padding: 20px; 
        padding-bottom: 10px; 
        padding-top: 10px; 
        margin:2.5px;
        font-variation-settings: 'FILL' 1, 'opsz' 24;
    }

    .nav#devices-nav{ position: sticky; }
    .material-symbols-rounded{font-size: 24px;}
    .icon{margin-right: 0;}
    .card { width: 150px; height: 250px; margin:10px; }
    .card .icon-area img{ width: 90px; height: 90px; }
    .card .icon-area p { font-size: 18px; }
    .i{ word-wrap: normal; width: auto; padding: 20px; }
    .i.big{ width: auto; }
    .i.small { width: auto; }
    .i-img.small {width: 89%;}
    .i#special-soon p{ font-size: 18px;}
    .i-icon{width: 82%;}
}

@media screen and (width < 380px) {
    .i{padding:17.5px; margin: 1px;}
    .nav{ padding: 7.5px; bottom: 15px; }
    .nav-link{padding-left: 17.5px; padding-right: 17.5px;}
}