@font-face {
    font-family: 'Splatfont2';
    src: url(fonts/Splatfont2.ttf) format('truetype');
    font-weight: 500;
}

@keyframes scroll {
 0% { transform: translateX(0%); }
 100% { transform: translateX(-100%); }
}
.slightgrow{
    transition:all 0.3s ease-in-out;
}
.slightgrow:hover{
    transform: scale(1.01);
}
.grow{
    transition:all 0.1s ease-in-out;
}
.grow:hover{
    transform: scale(1.1);
}

body{
    background-color: gray;
    font-family: "Splatfont2",serif;
    background-image:url(images/splatoon3-pattern-02-1920x1080-1.webp);
    justify-content: center;
}

.container{
    display: flex;
    flex-flow: column;
    margin-left:auto;
    margin-right:auto;
    align-items: center;
      position: relative;
  padding: 15px 20px;
    margin-top:5vh;
    width:90%;
    max-width:1000;
    height: clamp(700px,70vh,900px);
    min-height: 600px;
    border-radius:30px;
    box-shadow: inset 0px 0px 100px 0px rgba(255,255,255,0.3)
}
.container::before{
    z-index: -1;
      content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px; 
  border: 3px solid transparent;
  background: linear-gradient(to bottom,white,black) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
    
}
header{
    flex-shrink: 1;
    align-items: center;
    display: flex;
    border: 5px solid transparent;
    background: linear-gradient(to top, #f2f2f2 0%, white 10%) padding-box, linear-gradient(to bottom, white 0%, #969696 100%) border-box;
    .title{
        height:100%;
        width: 100%;
        background-image: linear-gradient(to bottom,#a6a6a6,#828282);
        color:transparent;
        background-clip: text;
        margin: 0;
        margin-left:4%;
        font-size: clamp(3rem, 7vw, 5rem);
        text-decoration: underline;
        text-underline-offset: 20px;
        text-decoration-thickness: 4px;
    }
    .circle{box-sizing:border-box;border:solid clamp(0.5rem,1vw,0.7rem) #a6a6a6; height:95%;aspect-ratio:1/1;border-radius:50%;margin-right: 10px;margin-left: auto}
    align-content:center;
    vertical-align: center;
    justify-self: center;
    margin-top:3%;
    width:clamp(100%,100vw,1200px);
    max-height: 23%;
    height:20vw;
    border-radius: 45vw;
}
.subcontainer{
    margin-top: 4vh;
    display:flex;
    height: 70%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 104%;

    gap: 1.3vw 4vw;
    
}
.abtme{
    overflow: hidden;
    h1{
        margin: 0;
        margin-left: 0.25em;
        font-size: 3.5em;
        line-height: 1.35;
        color: #cf5949;
        font-weight: 550;
        z-index: 1;

    }
       img{
        transition:all 0.2s ease-out;
        margin-top: -45%;
        margin-left: 23%;
        padding: 0;
        
        pointer-events: none;
        height: 110%;
           transform: scale(0.95);
        border-radius: 9%;
    }
    border-radius: 10px;
    text-decoration: none;
    background-image: linear-gradient(to bottom,rgba(255, 255, 255, 1) 90%, #cf5949 37%);
    width: 375;
    height:15rem;
    
}
.oc{
    
    h1{
        z-index: 1;
        position: relative;
        top: 29%;
          text-shadow:
    -5px -5px 0 #ffff,
     0   -5px 0 #ffff,
     5px -5px 0 #ffff,
     5px  0   0 #ffff,
     5px  5px 0 #ffff,
     0    5px 0 #ffff,
    -5px  5px 0 #ffff,
    -5px  0   0 #ffff;
        margin: 0;
        margin-left: 0.25em;
        font-size: 3.5em;
        line-height: 1.35;
        color: #6cceff;
    }
    img{
        transition:all 0.2s ease-out;
        transform: scale(0.95);
        margin-top: -44%;
        margin-left: 15%;
        padding: 0;
        
        pointer-events: none;
        height: 111%;
        border-radius: 9%;
    }
     text-decoration: none;
   border-radius: 10px;
    background-image: linear-gradient(to bottom,rgba(255, 255, 255, 1) 90%, #6cceff 37%);
    width: 375px;
    height:15rem;
    overflow: hidden;
}
.oc:hover {
    overflow: visible;
}
.oc:hover img {
    transform: scale(1.0);
        transform: translateY(-12px)
}
.abtme:hover {
    overflow: visible;
}
.abtme:hover img {
    transform: scale(1.0);
    transform: translateY(-7px);
}
.socials{
    display: flex;
    border: 5px solid transparent;
    background: linear-gradient(to top, #f2f2f2 0%, white 10%) padding-box, linear-gradient(to bottom, white 0%, #969696 100%) border-box;
    border-radius: 15px;
    width: 82%;
    height: 8rem;
    text-align: left;
    
}
    p{
        line-height: 8rem;
        margin: 0;
        color: darkgray;
        font-size: clamp(3rem, 5em, 5em);
        margin-left: 2%;
        margin-right: 1rem;
    }


    .text1{
        animation:scroll 15s linear infinite;
        white-space: nowrap;
    }
   .text2{
       animation-delay: 7.5s;
        animation:scroll 15s linear infinite;
        white-space: nowrap;
    }
.socials img{
    height: 105%; 
    position: relative;
    bottom: 1rem;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
@media(max-width:400px){
    .container{
        width:85%;
        height: 100%;
        .subcontainer{
            align-content:flex-start;
        }
    }
    .abtme {
        width:300px;
        img{
            margin-top:-53%;
            margin-left: 15%;
            height: 16rem;
        }
    }
    .oc {
        width:300px;
        img{
            margin-left: 1%;
            margin-top:-53.5%;
            height: 16rem;
        }
    }
    header{
        justify-content: center;
        height: 12em;
    .circle{
        display:none;
        width: 0;
        flex-shrink: 999;
    }
        .title{
            font-size: 4em;
            line-height: 1.5em;
            text-align: center;
            word-break: 
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 5%;
        }
    }
}
@media(max-width:855px){
    .container{
        height: 70em
    }
    .socials{
        align-items: center;
        justify-content: center;
        flex-shrink: 1;
        margin-top: 20;
        p{
            display: none;
        }
    }
    
    .icons{
        max-height: 105%;
        height: 20vw;
    }
}
@media(max-width:1210px){
        header{
        width: 105%;
    }
}