body {
        display:flex;
        flex-direction:column;
        align-items:center;        
        background-repeat:no-repeat;     
        margin: unset;
        font-family: roboto;        
        color: #333;
        font-size: 14px;
        line-height: 1.42857143;
    }

    body * {                
        box-sizing: border-box;
    }

    #front_page_background_blue_to_grey_gradient {    
        height: 100vh;
        position: fixed;
        width: 100vw;        
        background: linear-gradient(177deg, #79daff 34%, #d7f9ff);
        background: linear-gradient(177deg, #72d8ff 40%, #c8f1ff);
        background-repeat:no-repeat;         
        z-index: -1;
    }

    nav#navbar-header::before {
        content: "";
        display: block;
        position: absolute;        
        width: 100%;
        height: 400px;
        background: linear-gradient(355deg, #ffffff00 38%, #ffffff8c);        
        z-index: -1;
        top: -20px;
        left: 0;
    }
    

    .cookies_notification_text_container {
        width: 100%;
        background: 0 0;
        color: #19373c!important;
        font-size: calc(clamp(11px, 0.95vw, 14px)*0.8);
        font-weight: 400;    
        height: 12px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;            
        margin-bottom: -5px;
        margin-top: 2px;
    }

    .cookies_notification_text_container span {        
        margin: 0px clamp(10px, 2vw, 20px) -3px 0px;
    }

    .cookies_notification_text_container span:hover {
        margin: 0px 20px -3px 0px;
        cursor: pointer;
    }

    #navbar-header {
        width: 100%;
        position: relative;
    }

    .navbar-header-main {
        width: clamp(300px,77vw, 1200px); /*1200px max width is for viewport of 1558px*/
    }

    .navbar-header-main a {
        text-decoration: none;
    }

    #navbar-header {
        margin: 10px auto 0 auto;
        height: clamp(55px,6.2vw, 96px);
        background: linear-gradient(to bottom,#3f3f3f 0%,#272727 100%);     
    }

    .navbar-header-main {
        height: 100%;
        margin: 0 auto;  
        display: flex;
        position: relative;
    }

    .top-header-icon-container {
        height: 100%;
        display: flex;
        position: relative; 
    }

    .top-header-icon-container:hover {
        text-decoration: underline;
        color: white;
    }

    .top-header-text-1, .top-header-text-2 {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(13px, 1.2vw, 17px);
        font-family: 'Roboto slab';
        white-space: nowrap;
    }

    .top-header-text-1 {
        margin: 0 0.15vw 0 0 
    }

    .top-header-green-circle-graphic {
        height: 100%; aspect-ratio : 1.3 / 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 0.4vw 0 -2px;
        overflow: visible;

    }

    .green-circle { 
        position: absolute;
        transform-origin: center;  
        height: 115%; aspect-ratio : 0.97 / 1;
        border-radius: 50%;  
    }

    #circle1 {
        right: min(1vw, 15px);
        background-color: #daf366ff;  
        background-color: #e1ffeb;
    }

    #circle2 {
        right: min(0.5vw, 10px);  
        background-color: #daf366ff;
    }

    #circle3 {
        right: 0vw;
        background: linear-gradient(
            200deg,
            #daf366ff,
            #7cd200ff  
        );
        background: linear-gradient(507deg, #daf366ff, #5edf17 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }

    #circle3 span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
        margin: 0 0 0 min(0.85vw,14px);
        height: min(1.2vw,20px);
        font-family: 'Roboto slab';
        font-weight: bold;
        text-shadow: 0vw 0vw 0.2vw rgba(0,0,0, 0.5), 0vw 0.037vw 0.5vw rgba(0,0,0, 0.5);
    }

    #circle3 span:nth-of-type(1) {
        font-size: clamp(12px,1.38vw, 20px);    
        }

    #circle3 span:nth-of-type(2) {
        font-size: clamp(10px, 1.13vw, 16.5px);
    }

    #nav-header-logo-pice {
        position: absolute;
        height: 100%; aspect-ratio : 1.3 / 1;
        right: 0vw;  
        background: linear-gradient(to bottom,#3f3f3f 0%,#272727 100%);  
    }

    .container-top-nav-menu-right-side-links {
        position: absolute;
        right: 0;
        height: 100%;
        /*
            display: grid;
            grid-template-columns: 1fr 1fr;  
            grid-template-rows: 1fr;  
        */
        align-items: center;          
        display: flex;
    }

    .top-nav-menu-about-us-link span,
    .top-nav-menu-log-in-link span
    {  
        display: flex;
        color: white;
        font-size: clamp(10px, 1.05vw, 15px);
        padding-top: max(0.2vw, 4px);  
        padding-left:  clamp(13px, 1.3vw, 15px);  
    }

    .top-nav-menu-about-us-link span a,
    .top-nav-menu-log-in-link span a {  
        color: inherit;
        text-decoration: inherit;
    }
    
    .top-nav-menu-about-us-link span a:hover,
    .top-nav-menu-log-in-link span a:hover 
    {  
        text-decoration: underline;
        font-weight: 600;
        margin-left: -1px;
    }

    .red-price-sticker-99-kr img {
        width: clamp(65px, 8vw, 100px);
        position: absolute;
        right: clamp(-115px, -9vw, -80px);
        top: clamp(5px, 0.9vw, 17px);
    }

    .red-price-sticker-99-kr img:hover {
        width: clamp(70px, 8.5vw, 105px);
        position: absolute;
        right: clamp(-117px, -9.5vw, -85px);
        top: clamp(5px, 0.9vw, 12px);        
    }
    
    .log_in_form_in_header {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      width: fit-content;                            
      margin: unset;
      gap: 10px;
    }

    .container_log_in_button_in_header, 
    .container_forgot_password_button_in_header, 
    .container_password_input_field_in_header {
      position: relative;
    }              

    .container_log_in_button_in_header p,     
    .container_password_input_field_in_header div {
      font-size: clamp(8px, 0.8vw, 12px);
      margin: unset;
      position: absolute;
      top: 100%;
      color: white;
      padding: 5px;              
      background-color: #282828;
      border-radius: 0px 0px 5px 5px;
      cursor: pointer;
      white-space: nowrap;
      right: 0px;
    }            
    
    
    .go_back_to_login_from_forgotten_password {
      font-size: clamp(8px, 0.8vw, 12px);
      margin: unset;
      position: absolute;
      top: 100%;
      color: white;
      padding: 5px;              
      background-color: #282828;
      border-radius: 0px 0px 5px 5px;
      cursor: pointer;
      white-space: nowrap;
      right: 10px;
    } 

    .container_password_input_field_in_header div label {
      display: flex;
      align-items: center;
    }

    .username_input_log_in,
    .password_input_log_in,
    .username_input_forgotten_password {
      cursor: text;
      border-radius: 4px;                                
      padding: clamp(6px, 1vw, 10px) !important;
      width: 140px;
      font-size: 12px;
    }             

    .log_in_button_in_header, 
    .send_new_password_button_in_header {
      cursor: pointer;
      border-radius: 4px;                                
      color: #fff;                            
      background: linear-gradient(to bottom,#88e204 0%,#b3eb45 100%);                  
      text-shadow: 0px 1px 4px #000;
      font-weight: 700;
      padding: clamp(5px, 1vw, 10px) clamp(10px, 1.5vw, 15px);
    }

    .log_in_elements_and_code_that_display_only_on_logginn_page {
      display: none;      
    }

    .user_settings_tabs_in_header {
      display: flex;
      gap: 10px;
    }

    .user_settings_tabs_in_header a {
      color: white;
      text-decoration: none;
      font-size: clamp(10px, 1.05vw, 15px);
    }

    .forgotten_password_form_in_header {        
        display: flex;
        flex-direction: column;
        align-items: flex-end;        
        margin: unset;
        display: none;
    }

    .inputs_container_forgot_password_form_in_header {
        display: flex;
        gap: 10px;
        position: relative;
    }

    .response_after_asking_for_new_password {
        color: white;
        position: absolute;
        right: 0;
        top: 0px;
        background-color: blue; 
        z-index: 1;

    }
    
    .inactive_subscription_notification_banner {
        background-color: #ffc0c0;
        color: #5c0808;
        width: 100%;
        padding: 10px;
        display: flex;        
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        border-bottom: solid #d18989;        
        text-align: center;
    }

    .inactive_subscription_notification_banner a {
        color: #5c0808;
        font-weight: 600;
        text-decoration: none;
    }

    .close_button_inactive_subscription_notification_banner {        
        text-align: right;        
        cursor: pointer;
        font-size: 30px;
        margin-left: 50px;
    }
    


        
/* Override styles for screen widths from 768px to 481px */
@media screen and (max-width: 768px) {
    .top-header-text-1, .top-header-green-circle-graphic, .red-price-sticker-99-kr {
        display: none;
    }

    .log_in_form_in_header, 
    .inputs_container_forgot_password_form_in_header 
    {
        position: absolute;
        flex-direction: column;
        top: 0;
        right: 0;
        background-color: #282828;
        padding: 10px;
        border-radius: 0px 0px 5px 5px;
    }

    .container_log_in_button_in_header, 
    .log_in_button_in_header 
    {
        width: 100%;
    }

    .username_input_forgotten_password {
        width: 100%;
    }
}

/* Override styles for screen widths below 480px */
@media screen and (max-width: 480px) {    
    .cookies_notification_text_container {
        display: none;
    }

    #navbar-header {
        margin-top: 0px;
    }

    nav#navbar-header::before {
        display: none;
    }

    .top-header-icon-container::before {
        content: "";
        position: absolute;
        top: 51%;
        left: -16px;
        transform: translateY(-50%);
        width: 9px;
        height: 9px;
        background-color: #5cf150;
        border-radius: 50%;
    }

    #front_page_background_blue_to_grey_gradient {
        /*background: linear-gradient(#a5d6ff 70%, #e0e0e0);*/
        height: 330px;
        position: absolute;
        width: 100vw;
        background: linear-gradient(177deg, #77daff 50%, #ffffff);
        background-repeat: no-repeat;
        z-index: -1;
         
    }
}