Is there a way to get a checkbox to make several elements disappear without js?

I'm trying to make a sort of "cover" for a text post. However, the checkbox I coded with display: none is not working. I am not sure if it's because of the hierarchy, or because I added a hover to make it spin. I've tried moving it around and taking out the hover but it doesn't work. While I know this would be easier made with js, the platform I'm going to use this at doesn't support Js.

Here is the part of the html code, I'm working on. I want everythin inside "doubleport" to disapear, with a fade out transition.

<div class="doubletrouble"> 
   
   <div class= "doubleport" id="porting"> <div class= "menu"><label id=portbtnx> <input type="checkbox"> Double<br>Trouble</label> 
        <div id= portdata> Dato desu </div>
         <div id= portdata> Dato largo </div> 
      </div>
<div class= "doubledisp">
  <div id= "portleft"></div><div id="portright"></div>
</div></div>

then the css for the checkbox formating

.menu #portbtnx{
  width: 125px;
  height: 125px;
  background: radial-gradient( 
    rgba(252,255,200,1) 5%,
    rgba(229,180,59,1) 35%,
     rgba(91,16,134,1) 90%);
  margin: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  color: (--spacepurp);
  font-family: 'Lobster', cursive;
  font-size: 20px;}

.doubletrouble #portbtnx:hover {
  animation: spin 6s;}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

Lastly the code I have for the checkbox and transition:

.doubletrouble input[type=checkbox]{display:none}

input[type=checkbox label="portbtnx"]:checked~ .doubleport .menu .doubledisp {
    display: none;
  animation: disapear 4s;
}

@keyframes disapear{ from {opacity:1} to {opacity:0;}}

If anyone can help it'd be extremely appreciated. Cheers!

Here is the full code so far, please note that the css is not finished. Since it's quite long I decided to keep the snips as well.

.doubletrouble{
  height: 815px;
  width: 640px;
  background-color: var(--spacepurp, #3f1d59);
  padding: 10px;
}

.doubletrouble .doubleport{
 height: 795px;
 width: 620px; 
background:  linear-gradient(0deg, rgba(175,135,34,1) 0%, rgba(91,16,134,1) 50%, rgba(175,135,34,1) 100%);; 
  padding: 10px;}

.doubleport .doubledisp{
  display: flex;
  possition: relative;
  z-index: 1;
}

.doubleport #portleft{  
  height: 795px;
  width: 325px;
   background-image: url(https://i.imgur.com/nJr1QCa.png);
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0 100%);
  margin-right: -10px;
  
}
.doubleport #portright{
  height: 795px;
  width: 325px;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-image: url(https://i.imgur.com/SuO1nGg.png);
  margin-left: -10px;
}
.doubleport .menu{
  position: absolute;
  display: inline;
padding: 270px;
  width: 150px;
  margin-top: 100px;
  margin-left: -30px;
  z-index: 2;
}
.menu #portbtnx{
  width: 125px;
  height: 125px;
  background: radial-gradient( 
    rgba(252,255,200,1) 5%,
    rgba(229,180,59,1) 35%,
     rgba(91,16,134,1) 90%);
  margin: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  color: (--spacepurp);
  font-family: 'Lobster', cursive;
  font-size: 20px;}

.doubletrouble #portbtnx:hover {
  animation: spin 6s;}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.doubleport #portdata{
  margin: 5px;
  margin-left: -5px;
  margin-top: 10px;
  text-align: center;
  background: linear-gradient(90deg, rgba(91,16,134,1) 0%, rgba(229,180,59,1) 50%, rgba(252,255,200,1) 100%);
  color: (--spacepurp);
  font-family: 'Lobster', cursive;
  opacity: .8;
}
#portdata:hover{background: linear-gradient(90deg, 
   rgba(252,255,200,1) 0%, 
   rgba(229,180,59,1) 50%, rgba(91,16,134,1) 100%);
opacity: 1;
transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out; }

.doubletrouble input[type=checkbox]{display:none}

input[type=checkbox label="portbtnx"]:checked~ .doubleport .menu .doubledisp {
    display: none;
  animation: disapear 4s;
}

@keyframes disapear{ from {opacity:1} to {opacity:0;}}

<head> <link rel="stylesheet" href="https://files.jcink.net/uploads2/nikudoesthings/nikullection_icons/nikuicons.css"/> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">  </head>
<body> 
 <div class="doubletrouble"> 
   
   <div class= "doubleport" id="porting"> <div class= "menu"><label id=portbtnx> <input type="checkbox"> Double<br>Trouble</label> 
        <div id= portdata> Dato desu </div>
         <div id= portdata> Dato largo </div> 
      </div>
<div class= "doubledisp">
  <div id= "portleft"></div><div id="portright"></div>
</div></div>
  
  <div class= "dobletitle">
    
    <div class= "mojinaka">
      <div class="mojihako">
        <div class= "mojisoto"> 
        </div>
          </div>
  </div>
      </div>
  
  
  </div> </body>