/* Makes the way the boxes are sized more intuitive */
* {box-sizing:border-box}

/* Insert Sofia Sans Font */
@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
}



body {
    margin: 0;
    padding: 35px;
  
    width: 100%;
    height: 100%;
  
    /* Overflow set to "Hidden" when menu's in use */
    overflow-y: scroll;

    font-weight: bold;
  
    background-image: url(media/openday5nov2023/Lynx1-medium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
    text-align: center;
    justify-content: center;
  
    font-family:'Sofia Sans', Times New Roman;
    }
      
    body::-webkit-scrollbar{
        display: none;
}



.sidebar{
    writing-mode: vertical-lr;
    text-align: left;
    height: 100%;
    width: 75px;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    background-color: #212121c2;
    overflow: scroll;
    padding-top: 20px;
    backdrop-filter: blur(5px);
    }
    .sidebar::-webkit-scrollbar{
        display: none;
    }

    .sidebar a {
        width: 100%;
        border-style: none;
        border-radius: 15px;
    
        cursor: pointer;
        background-color: #006eff00;
    
        font-size: 400%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
        font-weight: lighter;
        text-decoration: none;
    }
    .sidebar a:hover {
        background-color: #d6c5c9b9;
    }
    .sidebar a:visited{
        color:rgba(255, 255, 255, 0.63);
}

/* Mobile Menu Bar - <800px (functional CSS in the 800px media query) */
.menubar{
    display: none;
}

/* Mobile Overlay Menu - <800px (functional CSS in the 800px media query) */
.mobilemenu{
    display: none;
}





.main{
    border-radius: 25px;

    margin-left: 75px;
    
    max-width: 100%;
    height: 100%;

    padding: 15px;

    background-color: #D6C5C9a4;

    overflow-y: scroll;
    }

    .main::-webkit-scrollbar{
        display: none;
    }

    .mainflex{
    display: flex;
    flex-direction: row;
}



.left{
    flex: 15%;
    max-width: 15%;

    border-radius: 25px;

    color: white;

    height: 100%;

    padding: 5px;
    padding-bottom: 10px; 
    background-color: #6D76A7;
    }

    .menuimages{
        width: 100%;
        height: auto;
    }

    .menuflex{
        display: flex;
        flex-direction: column;
    }

    .menuleft{
        flex: 100%;
    }

    .menuright{
        flex: 100%;
    }

    img.menubutterfly{
        max-width: 95%;
        margin-top: 5px;
    }

    img.menuvista{
        max-width: 95%;
        margin-top: 5px;
    }

    .collapsiblemenu {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 135%;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #6D76A7;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
    }
      
      .collapsiblemenu:after {
        content: '\2228';
        color: white;
        float: right;
        margin-left: 5px;
        background-color: #6D76A7;
    }
    
      .activemenu{
        background-color: #bbb;
    }
    
      .activemenu:after {
        content: "\2227";
        background-color: #bbb;
    }
      
      .contentmenu {
        font-family:'Sofia Sans', Times New Roman;
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #6D76A7;
        font-size: 125%;
}

a.menulinks:link {color:white; text-decoration: none;}
a.menulinks:visited {color:white; text-decoration: none;}
a.menulinks:hover {color: #E2C4D8; text-decoration: none;}

a.menulinksdarker:link {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:visited {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:hover {color: white; text-decoration: none;}


.centerhidden{
    flex: 57.5%;
    max-width: 57.5%;
    height: auto;
    }

    .centervisible{
    border-radius: 25px;
    margin-left: 1%;
    margin-right: 1%;
    height: auto;
    width: 98%;
    padding: 2.5%;
    background-color: #ebd9dd44;
    font-size: 100%;
}



.collapsiblecenter {
    font-family:'Sofia Sans', Times New Roman; 
    font-size: 100%;
    color: white;
    text-align: center;
    margin: 5px;
    border-radius: 25px;
  
    background-color: #B598CC;
    cursor: pointer;
    padding: 18px;
    width: 98%;
    border: none;
    text-align: left;
    }
  
    .collapsiblecenter:after {
      content: '\2228';
      color: white;
      float: right;
      margin-left: 5px;
    }
  
    .activecenter:after {
      content: "\2227";
    }
  
    .contentcenter {
      font-family:'Sofia Sans', Times New Roman;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #ff003300;
      border-radius: 25px;
      border: none;
}

a.middlelinks:link {color:#551A8B; text-decoration: none;}
a.middlelinks:visited {color:#551A8B; text-decoration: none;}
a.middlelinks:hover {color: #c484e4; text-decoration: none;}

a.noticelink:link {color:rgb(218, 59, 59); text-decoration: underline;}
a.noticelink:visited {color:rgb(218, 59, 59); text-decoration: none;}
a.noticelink:hover {color:rgb(232, 255, 25); text-decoration: none;}

/* Disable display: none; if the element needs to be visible!!! */
.warning{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;

    
    display: none; 
    
    /* Disable display: none; if the element needs to be visible!!! */
}

.mobilelogo{
    display: none;
}


.about{
    border-radius: 25px;
    width: 100%;
    height: auto;    
    margin-bottom: 15px;
    background-color: #E2C4D8c2;
    padding: 5px; 
    border: solid;
}


.nextcloud{
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }

    h2.aligntext{
        text-align: left;
    }

    img.nextcloudimg{
        float: right;
        height: 200px;
        padding: 15px;
    }

    object.filetree{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}


.theory{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .theoryleft{
        flex: 50%;
    }
    .theoryright{
        flex:50%;
        padding-top: 9%;
}


.hangar{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .hangarleft{
        flex: 50%;
        padding-top: 6%;
    }
    .hangarright{
        flex:50%;
}


.reports{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .reportsleft{
        flex: 50%;
    }
    .reportsright{
        flex:50%;
        padding-top: 13%;
}


.manuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .manualsleft{
        flex: 50%;
        padding-top: 5%;
    }
    .manualsright{
        flex:50%;
}


.jellyfin{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .pdfnotice{
        display: none;
    }
    img.jellyfinimg{
        float: right;
        height: 300px;
        padding: 5px;
    }
    iframe.library{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}


.simulators{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .simulatorsleft{
        flex: 50%;
        padding-top: 0%;
    }
    .simulatorsright{
        flex:50%;
        padding-top: 0%;
    }
    img.simimg{
        width: 97.5%;
        border-radius: 25px;
        padding: 5px;
}



.qrcodes{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .qrcodes1{
        flex: 25%;
    }
    .qrcodes2, .qrcodes3, .qrcodes4{
        flex: 25%;
        border-style: none none none dashed;
    }
    img.qrcodesimg{
        max-width: 75%;
        border-radius: 25px;
}


.calendar{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    iframe.icalendar{
        border-radius: 25px;
        height: 750px;
        width: 95%;
        padding: 5px; 
        border: solid;
}


.schedule{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;
    border: solid;
}



.dockerstatus{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);
    border: solid;
}



.supplies{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .suppliesleft{
        flex: 50%;
        padding-top: 4%;
    }
    .suppliesright{
        flex:50%;
}



.referencemanuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .referencemanualsleft{
        flex: 50%;
    }
   .referencemanualsright{
        flex:50%;
}


.code{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .codeleft{
        flex: 50%;
        padding-top: 5%;
    }
    .coderight{
        flex:50%;
}


.itsetup{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .itsetupleft{
        flex: 50%;
    }
    .itsetupright{
        flex:50%;
        padding-top: 3%;
}




.right{
    flex: 27.5%;
    max-width: 27.5%;
    height: 100%; 
    background-color: #ebd9dd44;;
    padding: 10px;
    border-radius: 35px;

}

.rightcolumn{
    padding: 10px;
    border-radius: 35px;
    background-color: #D6C5C9a4;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }
    span.rightcolumnnotice{
        font-size: 300%;
        text-align: center;
        margin: 10px;
        width: 100%;
        max-width: 100%;
    }
    .rightcolumn1, .rightcolumn2, .rightcolumn3{
        flex: 100%;
        max-width: 100%;
}


a.rightlinks:link {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:visited {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:hover {color: #EBD9DD; text-decoration: underline;}


.amc{
    border-radius: 25px;
    width: 100%;
    height: auto;
    padding-top: 10px;
    background-color: rgb(77, 141, 179);
    margin-bottom: 15px;
    border-style: solid;    
    }
    img.amc66{
        max-width: 95%;
        border-radius: 25px;
        border-style: solid; 
        border-color: black;
}

/*AMC Notices*/
.amcnotice1, .amcnotice2{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #4D8DB3;
    margin-bottom: 15px;
    border-style: solid;
    }
    img.amcnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
}

/* Vista - ACC relevant Notices*/
.newyear, .breakfest{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-image: linear-gradient(to right, #ec644a, #448cd0);
    margin-bottom: 15px;
    border-style: solid;
    }

/* Vista Notices*/
.elective, .orientationday, .mijnvista{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.vistanotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }


/*ACC Notices*/
.door, .news{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #448cd0;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.accnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

    
/*Swag Aviation Notices*/
.mobileandpages{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
    overflow-x: hidden;
    }

    img.swagnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

/*
.openevening{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}

.skills{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
}

.openday{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}
*/



.bottominfo{
    border-radius: 25px;
    margin-top: 1%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottom::-webkit-scrollbar{
        display: none;
    }

    .info{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    a.bottomlink:link {color:#121d83; text-decoration: underline;}
    a.bottomlink:visited {color:#121d83; text-decoration: none;}
    a.bottomlink:hover {color:#279494; text-decoration: none;}

    .personalcontact{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: 100%;   
    }

    .acccontact{
        flex: 34%;
        max-width: 34%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
        overflow-x: scroll;
    }
    .acccontact::-webkit-scrollbar{
        display: none;
    }


    .karlijn{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }

    span.contactblack{
        font-size: 140%;
        color: rgb(0, 0, 0);
        margin: 1px;
        text-align: center;
    }

    span.contactblue{
        font-size: 140%;
        color: #0d1988;
        margin: 1px;
        text-align: center;
}


.bottomnotice{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottomnotice::-webkit-scrollbar{
        display: none;
    }

    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .noticetext{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;   
    }

    .artcredit{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;  

        border-style: none none none dashed;
    }

    .artlinks{
        width: 100%;
        height: auto;
    }

    .acclogo{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }
    img.bottomacclogo{
        max-width: 100%;
        padding-top: 12.5%;
    }

    .amclogo{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;
    }
    img.bottomamclogo{
        max-width: 100%;
        padding-top: 17.5%;
}


.bottomlogos{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    overflow-y: hidden;
    }

    .logos{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .unraid{
        flex: 13%;
        max-width: 13%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .docker{
        flex: 14%;
        max-width: 14%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .mariadb{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nextcloudlogo{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .jellyfinlogo{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .handbrake{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .ytdl{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .ytdlp{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .delugevpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .protonvpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nginx{
        flex: 8%;
        max-width: 8%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .cloudflare{
        flex: 12%;
        max-width: 12%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }




@media (max-width: 1200px){
    .mainflex{
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .centerhidden{
        flex: 75%;
        max-width: 75%;
        margin-bottom: 5px;
    }

    .simulatorsright{
        padding-top: 10%;
    }

    .mainflex{
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .centerhidden{
        flex: 75%;
        max-width: 75%;
        margin-bottom: 5px;
    }

    .simulatorsright{
        padding-top: 10%;
    }

    /*Nextcloud elements*/
    h2.aligntext{
        text-align: left;
        }

        img.nextcloudimg{
            float: right;
            height: 200px;
            padding: 15px;
        }

        object.filetree{
            border-radius: 25px;
            height: 750px;
            width: 100%;
    }

.theoryleft, .hangarleft, .reportsleft, .manualsleft, .simulatorsleft, .suppliesleft, .referencemanualsleft, .codeleft, .itsetupleft{
    padding-top: 0%;
}

.theoryright, .hangarright, .reportsright, .manualsright, .simulatorsright, .suppliesright, .referencemanualsright, .coderight, .itsetupright{
    padding-top: 0%;
}

.right{
    flex: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
        
    .rightcolumn1, .rightcolumn2, .rightcolumn3{
        flex: 32%;
        max-width: 32%;
        height: 100%;
        margin-right: 0.66%;
        margin-left: 0.66%;
    }
 
    img.bottomacclogo{
        padding-top: 60%;
        }
        
    img.bottomamclogo{
        padding-top: 35%;
    }
}




@media (max-width: 800px){
    body {
        padding: 2px;

        height: calc(100% - 60px);
        top: 50px;
        position: fixed;

        font-size: 75%;
    }

    .sidebar{
        display: none;
    }

    /* Mobile Menu Bar - <800px*/
    .menubar{
        display: flex;
        flex-direction: row;
        height: 50px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #212121c2;
        overflow: hidden;
        padding: 5px;
        backdrop-filter: blur(5px);
        }
    
        .mainmenu{
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: row;
        }

        .menudiv{
            flex: 20%;
            max-width: 20%;

            /* Controls Link Font Size */
            font-size: 250%;
        }
        .menudiv a {
            height: 45px;
            width: 100%;
            border-style: none;
            border-radius: 15px;;
        
            cursor: pointer;
            background-color: #006eff00;

            color: white;
            font-family:'Sofia Sans', Times New Roman;

            padding: 5px;
            font-weight: lighter;
            text-decoration: none;
        }
        .menudiv a:hover {
            background-color: #d6c5c9b9;
        }
        .menudiv a:visited{
            color: white;
    }



    /* Mobile Overlay Menu - <800px */
    .mobilemenu {
        /* display -> block */
        display: none;
        
        width: 100%;
        height: calc(100% - 50px);
        position: fixed;
        z-index: 2;
        top: 50px;
        left: 0;
        overflow: hidden;
        font-size: 100%;
        
        backdrop-filter: blur(5px);
    }

    .mobilemenumain {
    padding: 5px;
    height: 100%;
    width: 100%;

    overflow-y: scroll;

    display: flex;
    flex-direction: row;

    background-color: #4d4d4dc2;
    color: white;
    }

    .mobilemenumain::-webkit-scrollbar{
    display: none;
    }

        img.mobilemenubutterfly{
        max-width: 95%;
        margin-top: 5px;
        }

        img.mobilemenuvista{
        max-width: 95%;
        margin-top: 75px;
        }

        .mobilemenuleft{
        flex: 50%;
        padding: 10px;
        }

        .mobilemenuright{
        flex: 50%;
        padding: 10px;
        }

        /* Collapsible */
        .mobilecollapsiblemenu {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 150%;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #E2C4D8c2;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        }

        .mobilecollapsiblemenu:after {
        content: '\2228';
        color: white;
        float: right;
        }

        .mobileactivemenu{
        background-color: #E2C4D8c2;
        }

        .mobileactivemenu:after {
        content: "\2227";
        }

        .mobilecontentmenu {
        font-family:'Sofia Sans', Times New Roman;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #bbbbbb00;
        font-size: 150%;
    }

    a.mobilemenulinks:link {color: white;; text-decoration: none;}
    a.mobilemenulinks:visited {color: white; text-decoration: none;}
    a.mobilemenulinks:hover {color: #E2C4D8c2; text-decoration: none;}

    a.mobilemenulinksdarker:link {color:#c9c9c9c2; text-decoration: none;}
    a.mobilemenulinksdarker:visited {color:#c9c9c9c2; text-decoration: none;}
    a.mobilemenulinksdarker:hover {color: white; text-decoration: none;}



    .mobilemenuclose{
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;

        overflow-y: scroll;
    }
    .mobilemenuclose::-webkit-scrollbar{
        display: none;
    }

    button.menuclose{
        height: 40px;
        width: 100%;
        border-style: none;
        border-radius: 15px;

        cursor: pointer;
        background-color: #006eff00;

        font-size: 200%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
    }
    button.menuclose:hover{
        background-color: #d6c5c9b9;
    }


    .main{
    max-width: 100%;

    padding: 5px;
    background-color: #D6C5C9a4;
    overflow-y: scroll;

    margin: 5px;
        }

        .mainflex{
            display: flex;
            flex-direction: column;
    }


    .left{
        display: none;
    }

    
    .centerhidden{
        flex: 100%;
        max-width: 100%;
        margin-bottom: 5px;
        }

        .collapsiblecenter {
            font-size: 75%;
        }

        .contentcenter {
            font-size: 90%;
    }

    .mobilelogo{
        display: block;

        border-radius: 25px;

        width: 100%;
        height: auto;    

        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }

        .mobileacc{
            max-width: 45%;
            width: 45%;
        }

        .mobilevista{
            max-width: 45%;
            position: relative;
            margin-left: 5%;
            top: -25px
    }

    .about{
        flex-direction: column;
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }


    /* Nextcloud Elements */
    h2.aligntext{
        text-align: center;
        }

        img.nextcloudimg{
            width: 100%;
            height: auto;
    }


    .theory, .reports, .hangar, .manuals, .supplies, .referencemanuals, .code, .itsetup{
        flex-direction: column;
        }
        .theoryleft, .reportsleft, .hangarleft, .manualsleft, .suppliesleft, .referencemanualsleft, .codeleft, .itsetupleft{  
            flex:100%;
            padding-top: 0%;
        }
        .theoryright, .reportsright, .hangarright, .manualsright, .suppliesright, .referencemanualsright, .coderight, .itsetupright{
            flex:100%;
            padding-top: 0%;
    }

    .jellyfin{
        flex-direction: column;
    }
        .pdfnotice{
            display: contents;
            width: 100%;
            color: rgb(218, 59, 59);
        }
        iframe.library{
            display: none;
    }

    /* Simulators image */ 
    .simulators{
        flex-direction: column;
    }
        .simulatorsleft{
            flex:100%;
            padding-top: 0%;
        }
        .simulatorsright{
            flex:100%;
            padding-top: 0%;
        }
        img.simimg{
            width: 75%;
    }

    .qrcodes{
        flex-direction: column;
    }
        .qrcodes1{
            flex: 100%;
        }
        .qrcodes2, .qrcodes3, .qrcodes4{
            flex: 100%;
            border-style: dashed none none none;
        }
        img.qrcodesimg{
            width: 50%;
    }

    iframe.icalendar{
        height: 400px;
    }


    .rightcolumn{
        max-width: 100%;
    }

    .right{
        flex: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;
        }

        .rightcolumn1, .rightcolumn2, .rightcolumn3{
            flex: 100%;
            max-width: 100%;
    }




    .info{
        display: flex;
        flex-direction: column;
        }

        .personalcontact{
            flex: 100%;
            max-width: 100%;
        }

        .acccontact, .karlijn{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
    }


    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }   

        .noticetext, .artcredit{
            flex: 100%;
            max-width: 100%;
            border-style: none none dashed none;
        }

        .acclogo{
            flex: 30;
            max-width: 30%;
            border-style: none;
        }
        img.bottomacclogo{
            max-width: 100%;
            padding-top: 0%;
        }

        .amclogo{
            flex: 70%;
            max-width: 70%;
        }
        img.bottomamclogo{
            max-width: 100%;
            padding-top: 10%;
    }


    .bottomlogos{
        margin-top: 1%;
        }

        .bottomlogos::-webkit-scrollbar{
            display: none;
        }

        .logos{
            flex-wrap: wrap;
        }

        .unraid, .docker, .mariadb, .nextcloudlogo, .jellyfinlogo, .handbrake, .ytdl, .ytdlp, .delugevpn, .protonvpn, .nginx, .cloudflare{
            flex: 16.6%;
            max-width: 16.6%;
        }
}