*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   overflow: hidden;
   width: 100vw;
   height: 100bh;
   background: linear-gradient(to top right, rgb(65, 71, 62), #a8846a);
}

.hide {
   visibility: hidden;
}

.Main {
   position: relative;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
}

.but2 {
   overflow: hidden;
}

.Main .wrapper {
   position: absolute;
   left: -10%;
   width: 50%;
   height: 100%;
   margin-right: 10%;
   padding: 0 100px 100px 100px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
}

.Main .mainScore {
   position: absolute;
   left: 3%;
   bottom: 3%;
}

.mainScoreBut{
   padding: 10px 30px;
   border: 1px solid gold;
   border-radius: 20px;
   font: 24px cursive;
   color: rgb(255, 236, 131);
   cursor: pointer;
   transition: 1s;
   transition-property: box-shadow;
   background: rgba(109, 109, 66, 0.815);
}

.mainScoreBut:hover {
   box-shadow: 0 0 10px goldenrod;
}

.but{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 60px;
   width: 300px;
   color: rgb(255, 236, 131);
   font: 24px cursive;
   border: 1px solid goldenrod;
   padding: 40px 30px;
   border-radius: 20px;
   overflow: hidden;
   transition: 1s;
   transition-property:  margin-left, background, box-shadow;
   cursor: pointer;
   text-align: center !important;
   background: rgba(65, 71, 62, 0.815);
   font-weight: 700;
}

.Main .introBut{
   display: block;
   position: absolute;
   padding: 30px;
   width: 40vw;  
   top: 10%;
   right: 16%;
   margin-top: 0;
   letter-spacing: 10px;
   text-align: center;
   border: 1px solid gold;
   border-radius: 20px;
   color: rgb(255, 243, 173);
   font: 28px cursive;
   cursor: pointer;
   background: #ffcc244b;
   transition: 1s;
   transition-property: letter-spacing, box-shadow;
}

.Main .introBut:hover {
   box-shadow: 0 0 50px goldenrod,
               0 0 30px goldenrod,
               0 0 10px gold,
               0 0 3px 1px gold;
   letter-spacing: 15px;
}

.Main .but::before {
   content: '';
   position: absolute;
   width: 200%;
   height: 200%;
   background: linear-gradient(#fff,#ffffff00);
   left: -200%;
   top: 0;
   rotate: 37deg;
   transition: 1s;
}

.Main .but:hover {
   background: #ffcc244b;
   margin-left: 100px;
   box-shadow: 0 0 50px goldenrod,
      0 0 30px goldenrod,
      0 0 10px gold,
      0 0 3px 1px gold;
}

.Main .but:hover::before {
   content: '';
   position: absolute;
   width: 200%;
   height: 200%;
   background: linear-gradient(#fff,#ffffff00);
   left: 300%;
   top: 0;
   rotate: 37deg;
   transition: 1s;
   text-align: center;
}

.Main .mainVideo {
   position: absolute;
   top: 35%;
   left: 38%;
   background-repeat: 30px;
   background: linear-gradient(gold, rgba(255, 217, 0, 0.288));
   border-radius: 30px;
   box-shadow: 20px 20px 1px rgba(218, 165, 32, 0);
   transition: 1s;
   transition-property: top, left, box-shadow;
   box-shadow: 0 0 1px goldenrod;
   overflow: hidden;
   width: 55%;
   height: 55%;
}

.mainBackgroundCover {
   position: absolute;
   top: -10%;
   left: -10%;
   height: 130%;
   width: 23%;
   rotate: -3deg;
   background: rgb(65, 71, 62);
   border: 3px solid rgb(209, 223, 203);;
}

.mainVideo__photo {
   width: 100%;
   height: 100%;
   background: url('../img/theBest2.png') center / cover;
   transition: 1s;
   transition-property: transform;
}

.mainVideo__photo:hover {
   transform: scale(1.05);
}

.qustMain {
   position: absolute;
   align-items: center;
   top: 0;
   left: 3%;
   width: 30%;
   height: 90%;
   max-height: 100%;
   margin: 30px;  
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: space-around;
   
}

.qustTheam {
   position: absolute;
   top: 0;
   left: 41%;
   padding: 10px;
}

.qustTheam span {
   display: inline;
   font: 31px cursive;
   color: rgb(255, 236, 131);
   text-shadow: 0 0 10px goldenrod;
   text-decoration: underline;
}

.qustMain div {
   width: 700px;
   position: relative;
   left: 7%;
   text-align: center;
   font: 24px cursive; 
   color: rgb(255, 236, 131);
   border: 3px solid goldenrod;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 15px 10px;
   margin: 3% 0 0 3%;
   cursor: pointer;
   background: rgba(65, 71, 62, 0.815);
   transition: 1s;
   transition-property: box-shadow, border;
   border: 1px solid gold;
}

.qustMain div::before {
   content: '';
   position: absolute;
   width: 300%;
   height: 300%;
   background: linear-gradient(#fff,#ffffff00);
   left: -300%;
   top: 0;
   rotate: 37deg;
   transition: 1s;
}

.qustMain div:hover::before {
   content: '';
   position: absolute;
   width: 200%;
   height: 200%;
   background: linear-gradient(#fff,#ffffff00);
   left: 300%;
   top: 0;
   rotate: 37deg;
   transition: 1s;
}

.variants {
   position: absolute;
   bottom: 10%;
   right: 0%;
   width: 60%;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

.variants .line div {
   position: relative;
   margin: 30px;
   padding: 15px;
   border: 1px solid gold;
   border-radius: 10px;
   font: 24px cursive;
   color: rgb(255, 236, 131);
   text-shadow: 0 0 3px gold;
   cursor: pointer;
   background: rgba(65, 71, 62, 0.815);
   transition: 1s;
   transition-property: box-shadow, transform;
   text-align: center;
   overflow: hidden;
}

.variants .line div:hover {
   transform: scale(1.1);
}

.variants .line div::first-letter {
   text-transform: uppercase;
}

.answered {
   box-shadow: 0 0 10px rgb(255, 251, 226);
}

.variantBtnPressed {
   box-shadow: 0 0 10px rgb(255, 251, 226);
}

.variants .line div::before {
   content: '';
   position: absolute;
   width: 70px;
   height: 30px;
   background: linear-gradient(rgb(255, 79, 79), rgb(255, 24, 132));
   rotate: 45deg;
   top: 0;
   right: -100px;
   transition: 1s;
   transition-property: right;
}

.variants .line div.variantBtnPressed::before {
   right: -30px;
}

.backgroundTheam {
   position: absolute;
   width: 40%;
   height: 40%;
   background: url('../img/processor.jpg') center / cover no-repeat;
   top: 5%;
   right: 5%;
   transition-property: transform,background;
   border-radius: 14px;
}

.backgroundTheam:hover {
   transition: 1s;
   transition-property: transform,background;
   transform: scale(1.03);
}

.backgroundTheam2 {
   position: absolute;
   width: 37%;
   height: 200%;
   background: rgb(65, 71, 62);
   top: 0;
   left: 0;
   rotate: -37deg;
   z-index: 0;
   border: 3px solid #ccc;
}

.backgroundTheam3 {
   position: absolute;
   width: 40%;
   height: 40%;
   background: #29292936;
   top: 3%;
   right: 3%;
   border-radius: 7px;
}

.btnBack {
   position: absolute;
   bottom: 0;
   left: 50%;
   padding: 10px;
   border: 1px solid goldenrod;
   border-radius: 10px;
   font: 20px cursive;
   color: rgb(255, 236, 131);
   margin-bottom: 10px;
   cursor: pointer;
   background: rgba(65, 71, 62, 0.815);
}


/*
                     Section score
*/

.secScore {
   position: absolute;
   left: 0;
   top: 0;
   min-width: 100vw;
   min-height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   font: 28px cursive;
   color: rgb(255, 236, 131);
}

.scoreResetResult {
   border: 1px solid gold;
   border-radius: 10px;
   padding: 10px;
   margin-top: 50px;
   background: rgba(65, 71, 62, 0.815);
   cursor: pointer;
   transition: 1s;
   transition-property: box-shadow, letter-spacing;
}

.scoreResetResult:hover {
   letter-spacing: 1px;
}

.scoreResetResult:hover {
   box-shadow: 0 0 10px gold;
}

.secScoreWrap {
   border: 1px solid gold;
   padding: 30px;
   border-radius: 30px;
   background: rgba(65, 71, 62, 0.815);
}

.secScore_backBtn {
   position: absolute;
   bottom: 3%;
   left: 48%;
   border: 1px solid gold;
   background: rgba(65, 71, 62, 0.815);
   padding: 10px 30px;
   cursor: pointer;
   border-radius: 10px;
   transition: 1s;
   transition-property: box-shadow;
}

.secIntro_backBtn {
   position: absolute;
   bottom: 3%;
   left: 48%;
   border: 1px solid gold;
   padding: 10px 30px;
   cursor: pointer;
   border-radius: 10px;
   transition: 1s;
   transition-property: box-shadow;
   color: rgb(255, 236, 131);
   font: 24px cursive;
   background: rgba(65, 71, 62, 0.815);
}

.secIntro_backBtn:hover {
   box-shadow: 0 0 10px gold;
}

.secScoreWrap div {
   text-align: center;
   margin-top: 10%;
}

.secScore_backBtn:hover {
   box-shadow: 0 0 10px gold;
}


.introImg {
   position: absolute;
   overflow: hidden;
   top: calc(50% - 70%/2);
   left: calc(50% - 70%/2);
   width: 70%;
   height: 70%;
   background: url('../img/a2_3.jpg') center / cover;
   transition: 1s;
   transition-property: filter;
   border-radius: 10px;
   pointer-events: none;
}

.introImg.hovered {
   filter: sepia(100%);
}

.introImg::before{
   content: '';
   position: absolute;
   top: -50vh;
   left: -300vw;
   width: 300vw;
   height: 200vh;
   background: #ffffff27;
   rotate: -45deg;
   transition: 1s;
}

.introImg.hovered::before {
   left: 100vw;
}

.intro__buts{
   position: absolute;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: linear-gradient(gold, pink);
   border: 2px solid goldenrod;
   top: 72%;
   left: 67%;
}

.butMouse {
   top: 72%;
   left: 67%;
}

.butKeybord {
   top: 34%;
   left: 51%;
}

.butMonitor {
   top: 44%;
   left: 47%;
}

.butKeybord {
   top: 74%;
   left: 51%;
}

.butComputer {
   top: 48%;
   left: 67%;
   cursor: pointer;
   box-shadow: 0 0 30px gold;
}

.mouseInfo, .computerInfo, .keybordInfo, .monitorInfo {
   position: absolute;
   top: 30px;
   left: 30%;
   color: rgb(255, 236, 131);
   font: 28px cursive;
   width: 50vw;
   padding: 30px;
   background: rgba(65, 71, 62, 0.815);
   opacity: 0;
   transition: 1s;
   transition-property: opacity, left, top;
   visibility: hidden;
   border: 3px dashed gold;
   text-align: center;
}

.butMouse:hover .mouseInfo{
   visibility: visible;
   opacity: 1;
   left: -400px;
   top: -300px;
}

.butMonitor:hover .monitorInfo{
   visibility: visible;
   opacity: 1;
   left: -300px;
}

.butComputer:hover .computerInfo{
   visibility: visible;
   opacity: 1;
   top: -300px;
   left: -400px;
}

.butKeybord:hover .keybordInfo{
   visibility: visible;
   opacity: 1;
   left: -300px;
   top: -200px;
}

.extraComputorInfo {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
}

.backToBaseCompInfo__btn{
   position: absolute;
   text-align: center;
   color: rgb(255, 235, 121);
   border-radius: 10px;
   bottom: 13%;
   width: 300px;
   font: 24px cursive;
   left: 43%;
   border: 1px solid gold;
   background: rgba(65, 71, 62, 0.815);
   padding: 10px;
   cursor: pointer;
   transition: 1s;
   transition-property: box-shadow, background;
}

.backToBaseCompInfo__btn:hover {
   box-shadow: 0 0 7px gold;
   background: rgba(255, 217, 0, 0.336);
}

.motherboardImg {
   position: absolute;
   top: 1%;
   left: calc(50% - 55%/2);
   width: 55%;
   height: 75%;
   background: url('../img/a2_6.jpg') center / cover;
}

.processor{
   top: 31%;
   left: 57%;
}

.slotsForRAM {
   top: 38%;
   left: 77%;
}

.radiatorsForChipset {
   top: 65%;
   left: 70%;
}

.battery {
   top: 58%;
   left: 48%;
}

.PCIslots{
   top: 48%;
   left: 37%;
}

.partsOfCompInfo {
   position: fixed;
   top: 0;
   left: 0; 
   top: 30px;
   left: 30%;
   color: rgb(255, 236, 131);
   font: 28px cursive;
   width: 50vw;
   padding: 30px;
   background: rgba(65, 71, 62, 0.932);
   opacity: 0;
   transition: 1s;
   transition-property: opacity, left, top;
   visibility: hidden;
   border: 3px dashed gold;
}

.processor:hover .processorInfo{
   visibility: visible;
   opacity: 1;
}

.slotsForRAM:hover .slotsForRAMInfo{
   visibility: visible;
   opacity: 1;
}

.radiatorsForChipset:hover .radiatorsForChipsetInfo {
   visibility: visible;
   opacity: 1;
}

.battery:hover .batteryInfo {
   visibility: visible;
   opacity: 1;
}

.PCIslots:hover .PCIslotsInfo {
   visibility: visible;
   opacity: 1;
}

.slotsForRAM:hover .slotsForRAMInfo {
   visibility: visible;
   opacity: 1;
}

.backSlots {
   top: 35%;
   left: 19%;
}

.backSlotsInfo {
   background: url('../img/backMotherboard.jpg') center / cover;
   width: 30vw;
   height: 30vh;
}

.backSlots:hover .backSlotsInfo {
   visibility: visible;
   opacity: 1;
}

.energyForMotherBoard{
   top: 35%;
   left: 92%;
}

.energyForMotherBoard:hover .energyForMotherBoardInfo {
   height: 55vh;
   background: url('../img/energy.png') center / cover;
   visibility: visible;
   opacity: 1;
}