<html>

  <head> 
  
    <title>Shellsiege &starf; Offishial Website</title>
    <link rel="icon" type="image/x-icon" href="https://f2.toyhou.se/file/f2-toyhou-se/characters/36585526?1765319817">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    
    {box-sizing: border-box;}
    
   html, body {
    height: 100vh;
    width: 100vw;
     margin: 0;
  padding: 0;
  background:url("https://f2.toyhou.se/file/f2-toyhou-se/images/124855335_kIDf1hm0P2sB4Dl.png?"), beige;
  cursor: url("https://f2.toyhou.se/file/f2-toyhou-se/images/127315709_32g4v95pXyaJBFX.png"), auto !important;
}

html {
    display: flex;
 justify-content: center;
    margin: 0 auto;
    
}

body {
  width: 100vw;
  height: 100vh;
text-align: center;
   
}

a:hover { 
  cursor: url("https://f2.toyhou.se/file/f2-toyhou-se/images/127315709_32g4v95pXyaJBFX.png"), auto;
  
  }
  
  a:focus-visible { 
  outline: 5px solid blue;
  
  }
  
  
.auto {
    cursor: url("https://f2.toyhou.se/file/f2-toyhou-se/images/127315709_32g4v95pXyaJBFX.png"), auto;

}



/*DIVS*/

 .maincontain{
    
  display: flex;
      width: 99vw;
     justify-content: space-evenly;
     margin: 0.4vh auto;
    }
    

    .flexdiv{
      width:50%;
      margin: 0 auto;
      padding: 1vw;
      text-wrap-mode: balance;
      overflow-wrap: break-word;
      align-content: center;
    }

.test-div{
 background-color: red;
 margin: 0 auto;
}

    .header{
background-color:#cbaca2;
width: 99vw;
border-radius:5px;
margin: 0 auto;
border: solid #5c425f 0.1vw;
box-shadow: 2px 2px 5px grey;

}

.funfacts{
    height: auto;
    align-content: center;
    text-wrap-mode: balance;
    padding: 0.6vw;
    margin: 1vw auto;
    background-color: #F2ECE2;
    border-radius: 1vw;
  }
  

  
  .left{
display: inline-block;
border: solid #5c425f 0.1vw;
background-color:#BD9E93;
color: maroon;
padding: 5px; 
width: 24%;
height: 150vh;
margin: 1.3vh auto;
box-shadow: 2px 2px 5px grey;
border-radius: 5px;
overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */

}

.middle{
display: inline-block;
border: solid #5c425f 0.1vw;
background-color: #C1AD95;
color: maroon;
padding: 5px;
width: 50%;
height: 150vh;
margin: 1.3vh;
box-shadow: 2px 2px 5px grey;
border-radius: 5px;
overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */


}

  .timelinetop{
          display: block; 
          margin: 2vh auto;
          background-color: #9C7883;
          padding: 5px;
          width: 70%;
          border-radius: 5px;

      }
      
      .timelineitem{
        display: flex;
        margin: 1vh auto;
        background-color:#795360 ;
        border-radius: 2vh;
        box-shadow: 2vh;
        width: 70%;
        height: auto;
        padding: 1vh;
        
      }
      
      
      .yearbox {
  background-color: black;
  color: #E8DFD1;
  border-radius: 1vw;
  padding: 0.2vw;
  width: 30%;
  margin: 1vh auto;
  font-size: 4vw;
}

.nocolumns{
display: block;
background-color:#CBBCA2;
color: maroon;
width: 99vw;
height: auto;
margin: 3vh auto;
box-shadow: 2px 2px 5px grey;
border-radius: 5px;


}


.nocolumns-tp{
display: block;
width: 99vw;
height: auto;
margin: 3vh auto;


}

.right{
display: inline-block;
border: solid #5c425f 0.1vw;
background-color:#BD9E93;
color: maroon;
padding: 5px; 
width: 24%;
height: 150vh;
margin: 1.3vh auto;
box-shadow: 2px 2px 5px grey;
border-radius: 5px;
overflow-y: auto;
  -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */


}

.textmain{
  background-color: #F2ECE2; 
  border-radius: 0.3vw; 
  padding: 1vw;
}

.texthalfbox{
  background-color: #E8DFD1; 
  width: 70%;
  border-radius: 0.3vw; 
  margin: 0.3vh auto;
  border: black solid 0.2vh;
  box-shadow: #9e9996 1px 1px 2px 2px;
}

.texthalfbox p{
width:60%;
margin: 1vh auto;
}

.warndarkbox{
  background-color: #5c425f; 
  color: white; 
  text-align: center;
  width: 70%;
  border-radius: 0.3vw; 
  margin: 1vh auto;
  border: black solid 0.2vh;
  box-shadow: #9e9996 1px 1px 2px 2px;
}

.attentionbox {
  background-color: #5C425F;
  color: #F2ECE2;
  border-radius: 1vw;
  padding: 0.2vw;
  text-wrap: wrap;
  text-wrap-mode: balance;
}


.news-advertisement{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-content: center;
  width: auto;
  border-radius: 0.3vw; 
  padding: 1vw;
}

.newsarticle {
  padding: 1vw; 
  border: 0.2vw solid #5c425f;
  border-radius: 1vw;
  background-color: #e1dace;
  margin: 1vh;
  box-shadow: #9e9996 1px 1px 3px 2px;
}


footer, .invisfooter {
  background-color: #bd9e93;
  width: auto;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  text-align: center;
  color: white;
  margin: 0 auto;
}

footer a{
  color: #492A4D;
  
}

  .infobox{
    background-color: black;
    color: white;
    display: inline-block;
    max-height: 10vw;
    width: 30%;
    margin: 1vw auto;
    overflow-y: auto;
  }
  

.infoboxtxt{
  color: #CBACA2;
  text-align: center;
  height: auto;

  
}

.gallery{
  width: 90%;
  display: flex;
  margin: 1vh auto;
 grid-gap: 0.5vh; 
  overflow-y: auto;
height: 80vh;
  
}

.img-gallery{
margin: auto;
width: 33%;
height: auto;
display: flex;
flex-direction: column;

 } 



/*SPEC ELEMENTS*/

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}



.updates{
  display:flex;
  flex-direction: column;
  overflow-y: auto;
  height: 30vh;
  margin: 1vh;

}

.updbox{
      background-color: #e8dfd1;
  padding: 2px;
  text-align: start;
}


.updcont{
  
  background-color: beige;
  text-align:start;
  padding: 2px;
  font-size: 14px;
}

.iframe {
    margin: 1vh auto;
    height: 50%;
  }
  
  


/*TEXT*/

.newsparagraphs{
padding: 1vw;
color: black;
font-size: 1.5vw;
width: 80%;
margin: 0 auto;
}


.news-heading{
  padding: 1vh;
  font-size: 22px;
}

.newspage-title{
  padding: 0.3vh;
  font-size: 4vh;
  font-weight: bold;
  border-radius: 1vw;
  width: auto;
  
}

.news-text{
  display: block;
  padding: 1vh;
  background-color:#F2ECE2;
  width: auto;
  height:auto;
  text-wrap-mode: balance;
  overflow-wrap: break-word;
  overflow:auto;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}


.timelinetext{
  display: block;
  padding: 1vh;
  width: 90%;
  height: auto;
  margin: 2vh auto;
  background-color: white;
  font-size: 3vh;
  text-wrap-mode: balance;
  overflow-wrap: break-word;

}

 .timelinebigtext{
          font-size: 6vh;
          color: white;
          text-shadow: black 1px 1px 1px;
          text-decoration: underline;
          text-wrap-mode: wrap;
          overflow-wrap: break-word;
          padding: 0.2vh;
      
      }
      
      .timelinemidtext{
          font-size: 3.5vh;
          color: white;
          text-shadow: black 1px 1px 1px;
           text-wrap-mode: wrap;
          overflow-wrap: break-word;
          padding: 0.2vh;
      
      }
      

.warn-text{
  background-color: #F6DF6D;
  width: 80%;
  margin: 1vh auto;
  font-size: 3vh;
  padding: 1vh;
  border-radius: 1vh;
  border: solid black 0.3vh;
}

.article{
  font-size: 5vh;
  text-transform: uppercase;
  padding: 0.1vh;
  text-wrap-mode: wrap;
  overflow-wrap: break-word;
}

.mintext{
  color: white;
  font-size: 2.5vh;
}





/*BUTTONS AND NAV*/

.topnav {
padding: 5px;
border-radius: 5px;
border: solid #5c425f 0.5vh;
justify-content: center;


}

ul.topnav {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content:space-evenly;
  margin: 0;
  padding: 4px;
  background-color: #795360;
  

}

ul.topnav li a {
  display: block;
  padding: 1vh 1vw;
  text-decoration: none;
border-radius: 2vh;
color: #e8dfd1;
font-size: 4vh;

}

ul.topnav li a:hover {
  background-color: #5c425f;
  transition: transform .2s;
  transform: scale(1.1);
}

 .button-basic {
  background-color: #795360;
  border: 0.5vh solid #5C425F;
  color: white;
  border-radius: 1vh;
  padding: 1.5vh;
  margin: 1vh auto;
  display: inline-block;
  font-size: 3.5vh;
  }
  
  
   .button-side {
  background-color: #795360;
  color: white;
  border: 0.1vw solid #5C425F;
  border-radius: 1vh;
  font-size: 3.5vh;
  padding: 1.5vh;
  margin: 1vh auto;
  width: auto;
  }
  

.btm{
    position: fixed;
    display: none;
    bottom: 0;
  padding: 2vh;
    align-items: center;
    width: 100vw;
    z-index:1;
  }
  
    .btmmob{
    position: fixed;
    display: none;
    bottom: 0;
    align-content: center;
    width: 100vw;
    z-index: 1;
  }
  
  .btmmob a{
  padding: 0.5vh;
  font-size: 2vh;
  }
  
  .btmmob .button-basic{
   height: 3vh;
  }
  
  .sidenav{
    position: fixed;
    max-height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
   width: 10%; 
    z-index:1;
    overflow-y: auto;  
    align-content: center;
    -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
  }
  
  .sidenav a{
    text-align: center;
    width: 60%;
    text-decoration: none;
  }
  
  .sidenav::-webkit-scrollbar {
  display: none;
  }

.skipnavlink{
 background-color: yellow;
 padding: 2vh;
 color: black;
 border: black solid 1.4vh;
  width: auto;
  height: 20vh;
  position: fixed;
transform: translate(-50%,-50%);
 opacity: 0%;
top: 70%;
  text-align: center;
  justify-content: center;
  font-size: 10vh;
}

.skipnavlink:focus{
 opacity: 100%;
}




/*GRAPHICS*/

.img-general{
  max-width: 100%;
  height: auto;
  display: block;
  overflow-x: auto;
}

.pagedoll{
  position: fixed;
  bottom: 0;
  right: 20px;
  max-height: 30%;
  width: auto;
  z-index: 1;
}

.tinyimg{
  height: auto;
  max-width: 3vh;
}

.img-gallery img{
  height: auto;
  width: 100%;
}

.img-timeline{
  max-width: 100%;
  max-height: 100%;
  display: block;
  overflow-x: auto;
  margin: 0 auto;
  border: 0.5vh solid black;
}


.shelltitle img{
  max-width: 60%;
  margin: 0 auto;
}

.logo{
    align-content: center;
    margin: 0 auto;
  
  }
  
  .logotop{
    display: block;
    align-content: center;
    margin: 0 auto;
    height: auto;
  
  }
  
  .titleshell{
    width: 15vw;
    
  }
  
  .surflogo-page{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    width: 98vw;
    height: 36vh;
  
  }
  
  .surf-half-l{
    display: inline-block;
    width: 50%;
    align-content: flex-end;
    text-align: end;
    margin-right: 4vw;
}

.surf-half-r{
    display: inline-block;
    width: 50%;
    align-content: flex-start;
    text-align: start;
}

.surftext {
  font-size: 5vw;
  text-align: start;
  max-width: 60%;
}

.shelltitle{
  display: block;
  margin: 0 auto;
  width: 50%;
}

.newspageimage-box{
  display: block;
  background-color: #795360;
  padding: 1vh;
  width: 95%;
 max-height: 30%;
 margin: 0 auto;
  align-items: center;
  justify-content: center;
  
}

.news-image-box{
  display: block;
  background-color: #795360;
  padding: 1vh;
  margin: 1vh auto;
  width: 95%;
 height: 40vh;
  align-items: center;
  justify-content: center;
  
}

.news-image{
  max-width: 100%;
  height: 100%;
  display: block;
  border: 0.15vw solid black;
  border-radius: 4px;
  object-fit: cover; 
  margin: 0 auto;
  
}
  
  .gallery-promo-imagebox{
  display: block;
  padding: 1vh;
  width: auto;
 height: auto;
  align-items: center;
  justify-content: center;
  
}
  
  
  
  

/*EFFECTS*/


#zoomhover:hover {
  transition: .2s;
transform: scale(1.05);
}

#major {
  background-color: #423249;
}

#dark {
  background-color: #3A2B40;
  padding: 2vh;
}

#imgshake:hover {
   animation: shake 1.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}






/*BROAD STYLE ELEMENTS*/

summary{
  list-style: none;
}

.left a{
    text-decoration: none;
  }





/*START MOBILE TOGGLE*/

@media screen and (min-width:836px) {
 
 html, body {
   
background-repeat: repeat;
background-attachment: fixed;
background-position:center;
}

.shelltitle{
  display: table;
  margin: 5vh auto;
}

.btm{
    display: block;
}
 
}

@media screen and (max-width:835px) {
  
  html, body {

background-repeat: repeat;
background-position: center;

}

  .surflogo-page{
    height: 20vh;
    margin: 4vh auto ;
  
  }

 .surf-half-l{
    text-align: middle;
}

.titleshell{
    width: 30vw;
  }


.surftext {
  font-size: 10vw;
  text-align: start;
  max-width: 60%;

}

.shelltitle {
  width: 80% ;
}


ul.topnav{
max-height: 20vh;
}

ul.topnav li a{
  display: block;
  padding: 1vh;
font-size: 6vw; 

}

.maincontain{
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

.logo{
    width: 40%;
  
  }


  footer {
bottom: 0 ;
width: 100vw;
margin: 0;
max-height: 100%;
  } 
  
    .invisfooter {
display: none;
    }
  
  .left{
    width: 90vw ;
    margin: 0 auto;
    height: auto;
  }
  
   .middle{
    width: 90vw ;
    margin: 0 auto;
    height: auto ;
  }
  
   .right{
    width: 90vw ;
    margin: 0 auto;
    height: auto ;
  }
  
  
  
.updates span{
  font-size: 3.2vh;
}

.newsparagraphs{
font-size: 4vw;
width: auto;

}

  .timelinetop{
          width: auto;

      }


 .timelinebigtext{
          font-size: 3.5vh;
      
      }
      
           .timelinemidtext{
          font-size: 2.4vh ;
      }
      
        .timelineitem{
        width: 95% ;

        
      }
      
        .infobox{
    display: none;
        }
   
  
  .warn-text{
    font-size: 1.6vh;
  }
  
  .mintext{
  font-size: 1.5vh;
}

.yearbox{
  height:6vh;
  font-size: 3vh;
  align-content: center;
}

    .btmmob{
    position: fixed;
    display: block;
    bottom: 0;
    align-items: center;
    width: 100vw;
    z-index:1;
  }
  
  .btmmob a{
    max-width: 10%;
  }
  
   .sidenav{
     display:none;
   }
   
   .texthalfbox p{
width:90%;
margin: 1vh auto;
}

.texthalfbox{
  width:auto;
}

.warndarkbox{
  width:auto;
}



}
  
/*END MOBILE TOGGLE*/



    </style>
  </head>
