/* Some elements depend on the screen size. */ 

@media (min-width: 1000px) { /* Large screens */ 
    :root {
        --barwidth: 200px;
        --barpadding: 10px;
        --displaytopbar: none; 
    }
}

@media (max-width: 999px) {
    :root {
        --barwidth: 0px;
        --barpadding: 0px; 
        --displaytopbar: initial; 
    }
}

.main-area { 
    width: calc(100% - var(--barwidth)); 
}

.sidebar {
    width: var(--barwidth);
    padding: var(--barpadding); 
    background-color: #B392AC;
    border-right: solid black; 
    border-right-width: thin; 
    background-image: url('media/no-texture.png'); 
  
    @media (prefers-reduced-motion: no-preference) {
      -webkit-animation: marquee 20s infinite linear;
    }
}

.sidebar-text-area {
   padding-left: 5%; 
   padding-top: 5%; 
   padding-bottom: 5%;
   padding-right: 5%; 
   margin-top: 0px;
   margin-bottom: var(--barpadding); 
   background-color: #735D78;
   object-fit: contain; 
}

.sidebar-text {
    font-family: "Times New Roman", Times, serif; 
    color: #F7D1CD;
    font-size: 1.25em; 
    padding-left: 0;
    padding-top: 0; 
    padding-bottom: 0;
    margin: 0;

    a:link { color: pink; }
    a:visited { color: white; } 
} 

.sidebar-text-title {
    font-family: "Times New Roman", Times, serif; 
    color: #F7D1CD;
    font-size: 1.25em; 
    padding-left: 0;
    padding-top: 0; 
    padding-bottom: 0;
    margin: 0;
    text-align: center; 

    a:link { color: pink; }
    a:visited { color: white; } 
} 

.sidebar-text-subtitle {
    font-family: "Times New Roman", Times, serif; 
    color: #fce9fa;
    font-size: 1.25em; 
    padding-left: 0;
    padding-top: 0; 
    padding-bottom: 0;
    margin: 0;
    text-align: center;
    font-style: italic;
} 

@-webkit-keyframes marquee {
    0% { background-position: 0 0; } 
    100% { background-position: calc(var(--barwidth)*2) var(--barwidth); } 
}

body, html {
    padding: 0;
    margin: 0;
    background-color: #E7E7E7;
    overflow-x: hidden;
}

.webpage {
    background-color: #E7E7E7;
    display: flex; 
    width: 100%;
    height: 100%; 
}

.title-area {
    background-color: #735D78; 
}

.title-text { 
    font-family: "Times New Roman", Times, serif; 
    color: #F7D1CD; 
    font-size: 60px; 
    padding-left: 20px; 
    padding-top: 20px; 
    padding-right: 20px; 
    padding-bottom: 10px; 
    margin: 0;
}
  
.subtitle-text { 
    font-family: "Times New Roman", Times, serif; 
    color: #F7D1CD; 
    font-size: 20px; 
    padding-left: 20px; 
    padding-bottom: 20px;
    padding-right: 20px;
    margin: 0;   
}

.topbar {
    display: var(--displaytopbar);
    .topbar-table {
        width: 100%; 
        border-top: 1px solid black;
        border-collapse: collapse;
        padding-top: 10px; 
        table-layout: auto;

        th { 
          background-color: #735D78;
          border-left: 1px solid black; 
          border-right: 1px solid black; 
        } 
    }
}

.no-animations .sidebar {
    animation: none; 
}