/* #region Universal */
  *{
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column; 
    margin: 0;
    padding: 0;
    font-size: 16px; 
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center; 
  }

  .suni_Frame{
    border: none;
    aspect-ratio: 16 / 9; 
    display: block;
    width: 100%;
    max-width: 100vw;
    height: auto; 
    max-height: 100vh;  
    container-type: size; 
  }

  .suni_View {
    border: 4px solid black;
    display: grid;
    grid-template-rows: 12cqh 81.5cqh 6.5cqh; 
    height: 100%; 
    width: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }     
/* #endregion */

/* #region Header */  
  .slog_Head { 
    border: 4px solid transparent; 
    width: 100%;
    height:12cqh;
    text-align: center; 
  } 

  .slog_HeadLog { 
    border: none; 
    padding-left: 18%;
    text-align: left; 
    font-weight: bold; 
    font-family: tahoma; 
    font-size: 3.5cqw; 
    color: darkviolet;   
    white-space: nowrap; 
    overflow: hidden;
  }

  .slog_LogoPort { 
    width: 100%;
    height:12cqh;
    text-align: center;
  } 

  .slog_Headport { 
    border:  4px solid transparent; 
    width: 100%; 
    height:8cqh;
    text-align: center; 
    font-weight: bold; 
    font-family: tahoma; 
    font-size: 3.5cqw; 
    color: darkviolet;   
  }
   
/* #endregion */  
   .cuni_Stage{
        border: .25vw solid black;
        width: 98.3vw;
        height: 96.8vh;
        margin: auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

.clnd_HeadGrid{
    display: grid;
    grid-template-columns: 9% 83% 8%;
    border: none;
    position: relative;
    height: 15vh;
    color: black;
}

.clnd_Logo{
    border-radius: 6em 6em 0 0;
    padding-top: 1vh;
    height: 50%;
    background: radial-gradient(circle at 70%, yellow 5%, orange 95%);
}

.clnd_Head{
    border: none;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Trebuchet MS;
    font-size: 5vw;
}

.clnd_HeadBtn{
    border: .25vw solid transparent;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: tahoma;
    font-size: 1vw;
}

.clnd_HeadBtn:hover {
    cursor: pointer;
    color: red;
    border: .25vw dashed red ;
}

.clnd_Title{
    border: none;
    height: 10vh;
    text-align: center;
    color: white;
    font-weight: normal;
    font-family: tahoma;
    font-size: 3vw;
}

.clnd_BtnGrid{
    display: grid;
    grid-template-columns:  33.3% 33.3% 33.4%;
    margin-top: 32vh;
    border: none;
    position: relative;
    height: 15vh;
    color: black;
    text-align: center;
}

.clnd_BtnTopic{
    visibility: hidden;
    margin-top: 1vh;
    border: .25vw solid transparent;
    border-radius: 6em;
    width: 50%;
    height: 9vh;
    position: relative;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: tahoma;
    font-size: 3vw;
}

.clnd_BtnTopic:hover {
    cursor: pointer;
    color: yellow;
    border: .25vw dashed yellow ;
}

.clnd_WelcomeGrid{
    display: grid;
    grid-template-columns: 14% 44% 8% 8% 8% 8% 10%;
    border: .25vw solid red;
    position: relative;
    height: 15vh;
    color: black;
}

.clnd_BotGrid{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    margin-top: 18vh;
    height: 7vh;
}

.clnd_BotText{
    border: none;
    height: 5vh;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial;
    font-size: 2.1vw;
}

.clnd_BtnBot{
    visibility: hidden;
    margin-top: .5vh;
    border: .25vw solid transparent;
    border-radius: 6em;
    width: 50%;
    height: 4.9vh;
    position: relative;
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: tahoma;
    font-size: 2vw;
}

.clnd_BtnBot:hover {
    cursor: pointer;
    color: yellow;
    border: .25vw dashed yellow ;
}

.clnd_BoxLog{
    height: 69vh;
    width: 50vw;
    margin: auto;
    margin-top: 17vh;
    background-size: 97% 102%;
    background-position: center;
    background-repeat: no-repeat;
}

.clnd_HeadGridLog{
    display: grid;
    grid-template-columns: 20% 60% 10%;
    border: none;
    position: relative;
    height: 5vh;
    color: black;
}

.clnd_HeadLog{
    border: none;
    text-align: center;
    font-weight: bold;
    font-family: Trebuchet MS;
    font-size: 3vw;
}
/* 
.clnd_HeadBtn{
    border: none;
    text-align: center;
    font-weight: bold;
    font-family: tahoma;
    font-size: 1vw;
}

.clnd_HeadBtn:hover {
    cursor: pointer;
    color: red;
    border: .25vw dashed red ;
}

.clnd_Title{
    border: none;
    height: 10vh;
    text-align: center;
    font-weight: normal;
    font-family: tahoma;
    font-size: 3vw;
} */